<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>个人轨迹-老师端</title>
		<link rel="stylesheet" href="../../css/CFNetPP_Base.css">
		<link rel="stylesheet" type="text/css" href="../../css/timeline.css"/>
		<style>
		     body html{
		        overflow: hidden;
				overflow-y: hidden;
		     }
			.year_title {
				width: 42%;
				padding: 2px 4px;
				color: #FFFFFF
			}
			.year {
				border: 1px solid #06bcff;
				width: 20%;
				height: 25px;
				margin-left: 22px;
				line-height: 25px;
				text-align: center;
				border-radius: 3px;
				margin-top: 5px;
				background: #06bcff url(../../icon/jiaobiao_down2.png) no-repeat 93% center;
				background-size: 10px;
				
			}
			.yuefen {
				width: 12%;
			}
			.tuijiDiv {
				font-size: 12px;
				background: #fff;
				padding: 8px;
				width: 95%;
			    min-height:40px;
			    height:auto;
			    overflow:hidden;
				border-radius: 3px;
				position: relative;
				left: 12px;
				padding-left:15px;
				box-shadow: 0px 5px 5px rgba(0,0,0,.1);
			}
			.sanjiao {
				width: 0;
				height: 0;
				border-width: 1.3rem;
				border-style: solid;
				border-color: transparent #fff transparent transparent;
				position: absolute;
				top: 18%;
				left: 0;
				margin-top: -.1rem;
				
			}
			.guiji_dian {
				position: absolute;
				width: 5px;
				height: 5px;
				border: 4px solid #fff;
				background: #06bcff;
				border-radius: 50%;
				left: -8px;
				top: 25px;
			}
			.line_clock {
				width: 73%;
				margin-left: 13px;
				padding: 15px 0 15px 15px;
				border-left: 2px solid #06bcff;
				position: relative;
			}
			.clock {
				width: 30px;
				position: absolute;
				/*left: 17.5%;*/
				/*margin-left: 23px;*/
			
			}
			
			.clock_left{
			   padding-right: 15px;
               text-align: right;
               padding: 3px 0;
               width: 12%;
               float: left;
			}
			.clock_right{
		        float: left;
			    width: 73%;
			    /*margin-left: 9px;*/
			    /*padding: 8px 0 15px 15px;*/
			
			}
			.month {
				width: 20%;
				height: 25px;
				margin-left: 22px;
				line-height: 25px;
				text-align: center;
				margin-top: 5px;
				background: url(../../icon/jiaobiao_down.png) no-repeat 93% center;
				background-size: 10px;
			}
			.month_title {
				/*width: 66%;*/
				padding: 2px 4px;
				color: #06bcff;
			}
			.guijiItemHd_month {
				height: 40px;
				line-height: 40px;
				/*cursor: pointer;*/
				overflow: hidden;
			}
			.guijiItemBd {
				background: url(../../icon/guijiLiBg.png) no-repeat -95.5% bottom;
				padding-bottom: 15px;
			}
			.guijiLi {
				background: unset;
				padding-bottom: 0px
			}
			.yuefen {
				padding-right: 15px;
				text-align: right;
				padding: 23px 0;
			}
			.day {
				width: 70%;
				height: 25px;
				line-height: 25px;
				text-align: left;
				margin-top: 5px;
				background: url(../../icon/jiaobiao_down.png) no-repeat 32% center;
				background-size: 10px;
			}
			.day_title {
				padding: 2px 4px;
				color: #06bcff;
			}
			.line-div {
				width: 70%;
				height: 15px;
				border-left: 2px solid #06bcff;
				margin-left: 20.5%
			}
			.line_fenge_div {
				height: 24px;
			}
			.line_fenge_left {
				padding-right: 15px;
				text-align: right;
				padding: 3px 0;
				width: 12%;
				float: left;
			}
			.line_fenge_right {
				float: left;
				width: 73%;
				margin-left: 13px;
				padding: 8px 0 15px 15px;
				border-left: 2px solid #06bcff;
			}
			.yuefen p.yu_date {
				color: #333;
				font-weight: bold;
			}
			
			
			.jifenSpan{
			  /*float: left;*/
			   margin-left:5px;
			  color: red
			}
			.top-chart-div {
				height: 250px;
			}
			::-webkit-scrollbar{width:0px}
			.guijiItem_clock {
			    height: 32px;
			    line-height: 32px;
			    /* cursor: pointer; */
			    overflow: hidden;
            }
            .noSign {
				left: 0;
				top: 0;
				margin: 0 auto;
				text-align: center;
				padding: 40px 20px;
				width: 90%;
			}
			.noSign img {
				max-width: 90%;
				display: inline-block;
			}
			.loadFailure {
				left: 0;
				top: 0;
				margin: 0 auto;
				text-align: center;
				padding: 40px 20px;
				width: 100%;
			}
			.loadFailure img {
				max-width: 90%;
				display: inline-block;
			}

			
		</style>
	</head>
	<body >
		
		 <!--<div style="margin-top: 66px" ></div>-->
		<!--<div class="top_div" >
			<div class="top-tag-div" onclick="openRule()">
				<img class="question-icon" src="../../image/icon_question.png">
				积分规则
			</div>
			<div class="top-content-div" id="top_chart_div">
				<div id="top_chart" class="top-chart-div" ></div>
			</div>
			<div class="top-bottom-div">
				<div class="hrLineDiv">
					<hr class="hrLine" style="width:40%;background-color:#E8E8E8;height:1px;border:none"/>
					个人足迹
					<hr class="hrLine" style="width:40%;background-color:#E8E8E8;height:1px;border:none"/>
				</div>
			</div>
		</div>-->
		<div class="timeline" >
			<ul class="clearfix guijiBd year_list">
				<!--<li class="guijiLi ">
					<div class="clearfix guijiItem_clock">
					     <div class="clock_left"> </div>
					     <div class="clock_right">
					      <img class="clock" src="../../icon/clock.png" alt="">
					     </div>
						
					</div>
				</li>-->
				
				
		<div class="line_fenge_div">
					<div class="line_fenge_left"></div>
					<div class="line_fenge_right"></div>
				</div>
				<li class="guijiLi">
					<div class="clearfix guijiItemHd">
						<div class="year">
							<span class="year_title">2018</span>
						</div>
					</div>
					<div class="month_list" style="display: block;">
					
					<div class="guijiItemBd_month " >
						<div class="clearfix guijiItemHd_month" >
							<div class="month">
								<span class="mont	<!--h_title">1月</span>
							</div>
						</div>
						<div class="day_list" id="dayItem'+data.month+year+'" style="display: block;">
						   <div class="guijiItemBd_day ">
							 <div class="clearfix guijiItem 2017 guijiItemHd_day " >
								 <div class="yuefen left"></div>
								 <div class="guiji left">
								   <span class="guiji_dian"></span>
									<div class="day">
									   <span class="day_title">
									   
									   1月1日
									   
									   
                                        </span>
									</div>
								 </div>
							</div>
							<div class="hour_list" id="hourItem'+chapterData.day+month+'" style="display: block;">
							  <div class="clearfix guijiItem 2017">
					<div class="yuefen left">
						<p class="yu_date">
						3:45
						</p>
					</div>
					<div class="guiji left">
					   <span class="guiji_dian"></span>
						<div class="sanjiao"></div>
						<div class="tuijiDiv">
						    <p class="tuiji_info ">
							<span class="alias">打开</span>
				           <span class="jifenSpan">+5积分</span>
						    </p>
						    <p class="tuiji_info ">
							<span class="vname" >资源课程</span>
						    </p>
						   
				        </div>
				   </div>
			  </div>'
							
							</div>
				    </div>
						 
						
						</div>
					</div>
					
					
			
					</div>
				</li>-->
			<!--	<div class="line_fenge_div">
					<div class="line_fenge_left"></div>
					<div class="line_fenge_right"></div>
				</div>-->
				<!--<li class="guijiLi">
					<div class="clearfix guijiItemHd">
						<div class="year">
							<span class="year_title">2016</span>
						</div>
					</div>
				</li>-->
			</ul>
		</div>
		   <div class="noSign"  id="noData"  hidden="hidden">
			<img src="../../image/icon_img.png" width="60%">
			<p class="font16 top_15 base_dark_grey" >
				暂无数据
			</p>
		</div>
		<div class="loadFailure" hidden="hidden" id="noNet">
			<img src="../../image/icon_img01.png" width="60%">
			<p class="" >
				数据加载失败
			</p>
			<p>
				请检查您的网络
			</p>
			<button type="button" class="mui-btn mui-btn-outlined" onclick="loadMonthData()">
				重新加载
			</button>
		</div>
	</body>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/jquery.min.js"></script>
	<script type="text/javascript" src="../../script/echarts_pie.min.js"></script>
	<script type="text/javascript" src="../../script/MD5.js"></script>
	<script type="text/javascript" src="../../script/common.js"></script>
	<script type="text/javascript" src="../../script/timeStampTool.js"></script>
	<script type="text/javascript" src="../../script/requestTool.js"></script>
	<script type="text/javascript" src="../../script/personalFootprint.js"></script>
	<script type="text/javascript">
		var chapterArr = new Array();
		var sumPoint=0;
		apiready = function() {
		    loadTopChartData();
			setupYearList()
			
		};
		//获取年份数据
		function setupYearList(){
			var date=new Date;  
	        var year=parseInt(date.getFullYear())-2017;
	        var nowYear=parseInt(date.getFullYear());
	        $('#year_list').html('');
           var subChapterHtmlStr="";
			for (var i = 0; i < year+1; i++) {
		       
				var chapterData = nowYear-i;
				
				subChapterHtmlStr += setYearUi(i + 1, chapterData);
				 
				
				loadMonthData(i + 1,chapterData);
		        
			}
			   $('.year_list').append(subChapterHtmlStr);
	        
			    $(".guijiItemHd").click(function() {
				if ($(this).next(".month_list").is(":hidden")) {
					$(this).next(".month_list").stop(true, true).slideDown();
					$(this).find(".year").css("background", "#06bcff url(../../icon/jiaobiao_down2.png) no-repeat 93% center");
				} else {
					$(this).next(".month_list").stop(true, true).slideUp();
					$(this).find(".year").css("background", "#06bcff url(../../icon/jiaobiao_up2.png) no-repeat 93% center");
				}
				$(this).find(".year").css("background-size", "10px");
			})
	           
		
		}
		//设置年份ui
		function setYearUi(index,year){
		
		  if(index==1){
		   return  '<li class="guijiLi yearItem'+index+'"  >'+
					'<div class="clearfix guijiItemHd">'+
						'<div class="year">'+
							'<span class="year_title">'+year+'</span>'+
						'</div>'+
					'</div>'+
					'<div class="month_list " id="monthItem'+year+'" style="display: block;">'+
			
					'</div>'+
				'</li>';
		}else{
		 return  '<div class="line_fenge_div">'+
					'<div class="line_fenge_left"></div>'+
					'<div class="line_fenge_right"></div>'+
				'</div>'+
				'<li class="guijiLi yearItem'+index+'"  >'+
					'<div class="clearfix guijiItemHd">'+
						'<div class="year">'+
							'<span class="year_title">'+year+'</span>'+
						'</div>'+
					'</div>'+
					'<div class="month_list " id="monthItem'+year+'" style="display: block;">'+
			
					'</div>'+
				'</li>';
		}
		
		
		
		
		
		
		}
		
		
		
		
				
		//加载头部chart图数据
		function loadTopChartData(){
		   var params = {
                uid: $api.getStorage('cfnetppuid'),
			};
			cfnetppPOST(url_getPointTotal, params, true, function(data, status) {
				if (status == 'success') {
					if (data.code== 200) {
					   $('#top_chart_div').show();
						var chapterlist = data;
						setupTopChartArr(data,data.total);
						
					} else {
						$('#top_chart_div').hide();
					}
				} else {
				  $('#top_chart_div').hide();
					
				}
			});
		
		
		}
		//加载月份数据
		function loadMonthData(index,year) {
			var params = {
//				uid : 119039,
                uid: $api.getStorage('cfnetppuid'),
				year : year,
			};
			cfnetppPOST(url_getContrailMonth, params, true, function(data, status) {
//			popu(params)
				api.refreshHeaderLoadDone();
				if (status == 'success') {
					if (data.code== 200) {
						var chapterlist = data.data;
						if (chapterlist != null && chapterlist.constructor == Array && chapterlist.length > 0) {//判断章节数组是否有效
//						    $('.timeline').show();
							chapterArr = chapterlist;
							setupMonthList(chapterArr,year);
//							$('.noData').hide();
//							$('.noNet').hide();
						} else {
						  $('.timeline').hide();
//							$('.noData').show();
//							$('.noNet').hide();
						}
					} else {
//						api.toast({
//							msg : '无数据'
//						});
//						  $('.timeline').hide();
//						$('#noData').show();
//						$('#noNet').hide();
					}
				} else {
//					api.toast({
//						msg : '无数据'
//					});
//					  $('.timeline').hide();
//					$('#noDataDiv').hide();
//					$('#noNet').show();
				}
			});
		}
		
		
		//设置月份ui
	  function setMonthUi(index, data,year) {			  
		  return   '<div class="line_fenge_div">' +
						'<div class="line_fenge_left"></div>' +
						'<div class="line_fenge_right"></div>' +
					'</div>' +
					'<div class="guijiItemBd_month " >' +
						'<div class="clearfix guijiItemHd_month" >' +
							'<div class="month">' +
								'<span class="month_title">' + data.month + '月</span>' +
							'</div>' +
						'</div>' +
						'<div class="day_list" id="dayItem'+data.month+year+'" style="display: block;"></div>' +
					'</div>';

			  
			  
			  
			  	  
		}
        //获取当月存在轨迹的日期
	   function loadDayData(index, month,year) {
			var params = {
//				uid:119039 ,
				uid: $api.getStorage('cfnetppuid'),
                year:year,
                month:month,
			};
			
//			var url_day="http://base.cfnet.org.cn/index.php/points/Getpoints/getContrailDay";
			cfnetppPOST(url_getContrailDay, params, true, function(data, status) {
				if (status == 'success') {
					if (data.code== 200) {
						var chapterlist = data.data;
						
						if (chapterlist != null && chapterlist.constructor == Array && chapterlist.length > 0) {//判断章节数组是否有效
							setupDayList(month, chapterlist,year);
						}
					} else {
					}
				} else {
				}
			});
		}
		
		
		
		
		//设置日期ui
       function setDayUI(index,chapterData,month){
		  var dateStr=month+"月"+chapterData.day+"日";
		  var hourStr="";
		  
		  hourStr='<div class="hour_list" id="hourItem'+chapterData.day+month+'" style="display: block;"></div>';
		  return  '<div class="guijiItemBd_day ">'+
							 '<div class="clearfix guijiItem 2017 guijiItemHd_day " >'+
								 '<div class="yuefen left"></div>'+
								 '<div class="guiji left">'+
								   '<span class="guiji_dian"></span>'+
									'<div class="day">'+
									   '<span class="day_title">'+dateStr+'</span>'+
									'</div>'+
								 '</div>'+
							'</div>'+
							hourStr+
				    '</div>'
        }
        //获取每日的详情数据
        function loadHourData(index, month,year,day) {
			var params = {
                uid: $api.getStorage('cfnetppuid'),
                year:year,
                month:month,
                day:day
			};
			
			cfnetppPOST(url_getPointsContrail, params, true, function(data, status) {
		
				if (status == 'success') {
					if (data.code== 200) {
						var chapterlist = data.data;
						if (chapterlist != null && chapterlist.constructor == Array && chapterlist.length > 0) {//判断章节数组是否有效
							setupHourList(day, chapterlist,month);
						}
					} else {
					}
				} else {
				}
			});
		}
		
		//设置小时ui
		function setHourUI(index,day,data){
		 var vnameStr;//章节名称
		 var pointsStr;//积分
		 var operationStr=data.operation;//动作
		 var actionStr;
		 var oneStr;
		 var messageStr;
		 var cnameStr;
		 var cname;
		 if(isEmpty(data.action)){
		   actionStr="";
		 }else{
		   actionStr="【"+data.action+"】";
		 }
		 if(isEmpty(data.vname)){
		   vnameStr="";
		 }else{
		    if(data.types==15){//公共课程部分
		      vnameStr="";
		    }else{
		      vnameStr=data.vname;
		    }
		 }
		 if(data.points==0){
		   pointsStr="";
		 }else{
		   pointsStr=judgePointsPositiveAndnegative(parseInt(data.points))+'积分';
		 }
		 if(isEmpty(data.message)){
		   messageStr="";
		 }else{
		   if(data.types==4||data.types==10){//学生端答疑部分和笔记部分
		       messageStr=data.message;
		     }else{
		      messageStr='-'+data.message;
		   }
		 }
		 if(isEmpty(data.cname)){
		   cname="";
		 }else{
		   if(data.types==18){//老师端提问答疑
		    cname=data.pname+'-'+data.cname;
		   }else{
		   cname=data.cname;
		   }
		 }
		 
		 if(data.types!=13){
			 cnameStr=cname;
			 if(pointsStr!=0){
			 oneStr=(operationStr+actionStr+vnameStr+messageStr)+',';
			 }else{
			  oneStr=(operationStr+actionStr+vnameStr+messageStr);
			 }
			 
		 }else{//认证部分
			 oneStr=data.message;
			 cnameStr=cname
		 }
	
		 return '<div class="clearfix guijiItem 2017">'+
					'<div class="yuefen left">'+
						'<p class="yu_date">'+
							timeWithStamp5(data.instime)+
						'</p>'+
					'</div>'+
					'<div class="guiji left">'+
					   '<span class="guiji_dian"></span>'+
						'<div class="sanjiao"></div>'+
						'<div class="tuijiDiv">'+

                            '<div style="float: left;width: 100%">'+
						      '<p class="tuiji_info ">'+
						      oneStr+
						       '<span class="jifenSpan">'+pointsStr+'</span>'+
						      '</p>'+
						      '<p class="tuiji_info ">'+
						    cnameStr+
						      '</p>'+

						    '</div>'+
//						    '<div style="float: left;width: 22%;margin-top: 2px;">'+
//						        '<span class="jifenSpan">'+pointsStr+'</span>'+
//						    '</div>'+
						   
				        '</div>'+
				   '</div>'+
			  '</div>';
		}

	//字符串截取10位
    function notThirteen(b) {
		var str = b;
	
		if (str.length > 16) {
			b = str.substr(0, 15) + '...';
			return b
		} else {
			return b
		}
    }
    
   
          //退出页面
		function backClick() {
			api.closeWin({
			});
		}

	</script>
</html>